import QtQuick

/* 自定义组件：带图片的按键 */
MouseArea {
    id: imgBtn
    width: 50
    height: 30
    hoverEnabled: true

    // 可依据自身需求追加
    property string ibUrl: "" // 图片地址
    property color ibBackColor: "#FFFFFF" // 背景色
    property color ibHoverColor: "#8A8A8A" // 悬停过渡颜色
    property int ibAnimationTime: 200 // 动画时间
    property real ibImgMarginWidth: 0 // 图片的左右两侧外边距
    property real ibImgMarginHeight: 0 // 图片的上下两侧外边距

    Rectangle {
        id: imgBtnRect
        anchors.fill: parent
        color: ibBackColor

        Image {
            id: btnImg
            x: ibImgMarginWidth
            y: ibImgMarginHeight
            width: parent.width - ibImgMarginWidth * 2
            height: parent.height - ibImgMarginHeight * 2
            source: ibUrl
        }
        // 设置当前状态
        state: "exit"
        // 状态对应的属性变化
        states: [
            State {
                name: "enter"
                PropertyChanges {
                    target: imgBtnRect
                    color: ibHoverColor
                }
            },
            State {
                name: "exit"
                PropertyChanges {
                    target: imgBtnRect
                    color: ibBackColor
                }
            }
        ]
        // 绑定各个状态的属性变化动画
        transitions: [
            Transition {
                ColorAnimation {
                    properties: "color"
                    duration: ibAnimationTime
                }
            }
        ]
    }

    onEntered: {
        imgBtnRect.state = "enter"
//        console.log("entered")
    }

    onExited: {
        imgBtnRect.state = "exit"
//        console.log("exited")
    }

}
